<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Runtime API Examples | coolui-scroller</title>
    <meta name="description" content="coolui-scroller">
    <link rel="preload stylesheet" href="/coolui-scroller/v3/assets/style.5380d6f3.css" as="style">
    <script type="module" src="/coolui-scroller/v3/assets/app.f251d5b7.js"></script>
    <link rel="preload" href="/coolui-scroller/v3/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/coolui-scroller/v3/assets/chunks/framework.83b1ca13.js">
  <link rel="modulepreload" href="/coolui-scroller/v3/assets/chunks/theme.baa4075e.js">
  <link rel="modulepreload" href="/coolui-scroller/v3/assets/api-examples.md.d075f7b8.lean.js">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f8c369d3><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ded57ec7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ded57ec7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f8c369d3 data-v-50460342><div class="VPNavBar" data-v-50460342 data-v-c22d020d><div class="container" data-v-c22d020d><div class="title" data-v-c22d020d><div class="VPNavBarTitle" data-v-c22d020d data-v-6b0608e4><a class="title" href="/coolui-scroller/v3/" data-v-6b0608e4><!--[--><!--]--><!----><!--[-->coolui-scroller<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-c22d020d><div class="curtain" data-v-c22d020d></div><div class="content-body" data-v-c22d020d><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-c22d020d><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-c22d020d data-v-96dc1c0e><span id="main-nav-aria-label" class="visually-hidden" data-v-96dc1c0e>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/coolui-scroller/v3/" tabindex="0" data-v-96dc1c0e data-v-f1680105 data-v-b4649d25><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/coolui-scroller/v3/guide.html" tabindex="0" data-v-96dc1c0e data-v-f1680105 data-v-b4649d25><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/coolui-scroller/v3/components/scroller.html" tabindex="0" data-v-96dc1c0e data-v-f1680105 data-v-b4649d25><!--[-->组件<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-96dc1c0e data-v-e79cc2f4><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e79cc2f4><span class="text" data-v-e79cc2f4><!----> 示例 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-e79cc2f4><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-e79cc2f4><div class="VPMenu" data-v-e79cc2f4 data-v-07bbecd3><div class="items" data-v-07bbecd3><!--[--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/case/case.html" data-v-b80a7a9e data-v-b4649d25><!--[-->有趣的下拉<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/case/case2.html" data-v-b80a7a9e data-v-b4649d25><!--[-->下拉组合<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/case/case3.html" data-v-b80a7a9e data-v-b4649d25><!--[-->下拉二楼<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/coolui-scroller/v3/community.html" tabindex="0" data-v-96dc1c0e data-v-f1680105 data-v-b4649d25><!--[-->社群<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/coolui-scroller/v3/sponsors.html" tabindex="0" data-v-96dc1c0e data-v-f1680105 data-v-b4649d25><!--[-->赞助<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-96dc1c0e data-v-e79cc2f4><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-e79cc2f4><span class="text" data-v-e79cc2f4><!----> v3.3.8 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-e79cc2f4><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-e79cc2f4><div class="VPMenu" data-v-e79cc2f4 data-v-07bbecd3><div class="items" data-v-07bbecd3><!--[--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-8" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.8<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-7" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.7<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-6" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.6<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-4" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.4<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-3" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-2" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.2<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-1" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.1<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-3-0" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.3.0<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-9" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.9<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-8" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.8<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-7" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.7<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-6" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.6<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-5" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.5<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-2-3" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.2.3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-1-1" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.1.1<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-0-8" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.0.8<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-0-5" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.0.5<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-0-4" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.0.4<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="/coolui-scroller/v3/version.html#v3-0-0" data-v-b80a7a9e data-v-b4649d25><!--[-->v3.0.0<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="https://wzs28150.github.io/coolui-scroller/v2/" target="_blank" rel="noreferrer" data-v-b80a7a9e data-v-b4649d25><!--[-->v2<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-b4649d25><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-07bbecd3 data-v-b80a7a9e><a class="VPLink link" href="https://github.com/wzs28150/coolui-scroller/tree/1.0" target="_blank" rel="noreferrer" data-v-b80a7a9e data-v-b4649d25><!--[-->v1<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-b4649d25><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-c22d020d data-v-02c0f777><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-02c0f777 data-v-6f18cc37 data-v-cd1cd39f><span class="check" data-v-cd1cd39f><span class="icon" data-v-cd1cd39f><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-6f18cc37><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-6f18cc37><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-c22d020d data-v-320b546f data-v-35dd87af><!--[--><a class="VPSocialLink" href="https://github.com/wzs28150/coolui-scroller" aria-label="github" target="_blank" rel="noopener" data-v-35dd87af data-v-425ec35e><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-c22d020d data-v-cc2b3cd9 data-v-e79cc2f4><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e79cc2f4><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-e79cc2f4><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-e79cc2f4><div class="VPMenu" data-v-e79cc2f4 data-v-07bbecd3><!----><!--[--><!--[--><!----><div class="group" data-v-cc2b3cd9><div class="item appearance" data-v-cc2b3cd9><p class="label" data-v-cc2b3cd9>Appearance</p><div class="appearance-action" data-v-cc2b3cd9><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-cc2b3cd9 data-v-6f18cc37 data-v-cd1cd39f><span class="check" data-v-cd1cd39f><span class="icon" data-v-cd1cd39f><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-6f18cc37><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-6f18cc37><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-cc2b3cd9><div class="item social-links" data-v-cc2b3cd9><div class="VPSocialLinks social-links-list" data-v-cc2b3cd9 data-v-35dd87af><!--[--><a class="VPSocialLink" href="https://github.com/wzs28150/coolui-scroller" aria-label="github" target="_blank" rel="noopener" data-v-35dd87af data-v-425ec35e><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-c22d020d data-v-d28491c6><span class="container" data-v-d28491c6><span class="top" data-v-d28491c6></span><span class="middle" data-v-d28491c6></span><span class="bottom" data-v-d28491c6></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f8c369d3 data-v-dbf032ef><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbf032ef data-v-9efbcb69><button data-v-9efbcb69>Return to top</button><!----></div></div><!----><div class="VPContent" id="VPContent" data-v-f8c369d3 data-v-fa866f11><div class="VPDoc has-aside" data-v-fa866f11 data-v-8bc1b22e><!--[--><!--]--><div class="container" data-v-8bc1b22e><div class="aside" data-v-8bc1b22e><div class="aside-curtain" data-v-8bc1b22e></div><div class="aside-container" data-v-8bc1b22e><div class="aside-content" data-v-8bc1b22e><div class="VPDocAside" data-v-8bc1b22e data-v-e53d583c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-e53d583c data-v-efb43106><div class="content" data-v-efb43106><div class="outline-marker" data-v-efb43106></div><div class="outline-title" data-v-efb43106>快速跳转</div><nav aria-labelledby="doc-outline-aria-label" data-v-efb43106><span class="visually-hidden" id="doc-outline-aria-label" data-v-efb43106> Table of Contents for current page </span><ul class="root" data-v-efb43106 data-v-9440f338><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-e53d583c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-8bc1b22e><div class="content-container" data-v-8bc1b22e><!--[--><!--]--><!----><main class="main" data-v-8bc1b22e><div style="position:relative;" class="vp-doc _coolui-scroller_v3_api-examples" data-v-8bc1b22e><div><h1 id="runtime-api-examples" tabindex="-1">Runtime API Examples <a class="header-anchor" href="#runtime-api-examples" aria-label="Permalink to &quot;Runtime API Examples&quot;">​</a></h1><p>This page demonstrates usage of some of the runtime APIs provided by VitePress.</p><p>The main <code>useData()</code> API can be used to access site, theme, and page data for the current page. It works in both <code>.md</code> and <code>.vue</code> files:</p><div class="language-md"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&lt;script setup&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">import { useData } from &#39;vitepress&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">const { theme, page, frontmatter } = useData()</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;/script&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">## </span><span style="color:#FFCB6B;">Results</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">### </span><span style="color:#FFCB6B;">Theme Data</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;pre&gt;{{ theme }}&lt;/pre&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">### </span><span style="color:#FFCB6B;">Page Data</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;pre&gt;{{ page }}&lt;/pre&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">### </span><span style="color:#FFCB6B;">Page Frontmatter</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;pre&gt;{{ frontmatter }}&lt;/pre&gt;</span></span></code></pre></div><h2 id="results" tabindex="-1">Results <a class="header-anchor" href="#results" aria-label="Permalink to &quot;Results&quot;">​</a></h2><h3 id="theme-data" tabindex="-1">Theme Data <a class="header-anchor" href="#theme-data" aria-label="Permalink to &quot;Theme Data&quot;">​</a></h3><pre>{
  &quot;nav&quot;: [
    {
      &quot;text&quot;: &quot;首页&quot;,
      &quot;link&quot;: &quot;/&quot;
    },
    {
      &quot;text&quot;: &quot;指南&quot;,
      &quot;link&quot;: &quot;/guide&quot;
    },
    {
      &quot;text&quot;: &quot;组件&quot;,
      &quot;link&quot;: &quot;/components/scroller.md&quot;
    },
    {
      &quot;text&quot;: &quot;示例&quot;,
      &quot;items&quot;: [
        {
          &quot;text&quot;: &quot;有趣的下拉&quot;,
          &quot;link&quot;: &quot;/case/case&quot;
        },
        {
          &quot;text&quot;: &quot;下拉组合&quot;,
          &quot;link&quot;: &quot;/case/case2&quot;
        },
        {
          &quot;text&quot;: &quot;下拉二楼&quot;,
          &quot;link&quot;: &quot;/case/case3&quot;
        }
      ]
    },
    {
      &quot;text&quot;: &quot;社群&quot;,
      &quot;link&quot;: &quot;/community&quot;
    },
    {
      &quot;text&quot;: &quot;赞助&quot;,
      &quot;link&quot;: &quot;/sponsors&quot;
    },
    {
      &quot;text&quot;: &quot;v3.3.8&quot;,
      &quot;items&quot;: [
        {
          &quot;text&quot;: &quot;v3.3.8&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-8&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.7&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-7&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.6&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-6&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.4&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-4&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.3&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-3&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.2&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-2&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.1&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-1&quot;
        },
        {
          &quot;text&quot;: &quot;v3.3.0&quot;,
          &quot;link&quot;: &quot;/version.md#v3-3-0&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.9&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-9&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.8&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-8&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.7&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-7&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.6&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-6&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.5&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-5&quot;
        },
        {
          &quot;text&quot;: &quot;v3.2.3&quot;,
          &quot;link&quot;: &quot;/version.md#v3-2-3&quot;
        },
        {
          &quot;text&quot;: &quot;v3.1.1&quot;,
          &quot;link&quot;: &quot;/version.md#v3-1-1&quot;
        },
        {
          &quot;text&quot;: &quot;v3.0.8&quot;,
          &quot;link&quot;: &quot;/version.md#v3-0-8&quot;
        },
        {
          &quot;text&quot;: &quot;v3.0.5&quot;,
          &quot;link&quot;: &quot;/version.md#v3-0-5&quot;
        },
        {
          &quot;text&quot;: &quot;v3.0.4&quot;,
          &quot;link&quot;: &quot;/version.md#v3-0-4&quot;
        },
        {
          &quot;text&quot;: &quot;v3.0.0&quot;,
          &quot;link&quot;: &quot;/version.md#v3-0-0&quot;
        },
        {
          &quot;text&quot;: &quot;v2&quot;,
          &quot;link&quot;: &quot;https://wzs28150.github.io/coolui-scroller/v2/&quot;
        },
        {
          &quot;text&quot;: &quot;v1&quot;,
          &quot;link&quot;: &quot;https://github.com/wzs28150/coolui-scroller/tree/1.0&quot;
        }
      ]
    }
  ],
  &quot;sidebar&quot;: {
    &quot;/guide/&quot;: [],
    &quot;/components/&quot;: [
      {
        &quot;text&quot;: &quot;Scroller 滚动组件&quot;,
        &quot;link&quot;: &quot;/components/scroller.md&quot;
      },
      {
        &quot;text&quot;: &quot;Item 列表项组件&quot;,
        &quot;link&quot;: &quot;/components/item.md&quot;
      },
      {
        &quot;text&quot;: &quot;Page 长列表分页组件&quot;,
        &quot;link&quot;: &quot;/components/page.md&quot;
      },
      {
        &quot;text&quot;: &quot;Empty 空列表组件&quot;,
        &quot;link&quot;: &quot;/components/empty.md&quot;
      },
      {
        &quot;text&quot;: &quot;Handtip 手势提示组件&quot;,
        &quot;link&quot;: &quot;/components/handtip.md&quot;
      },
      {
        &quot;text&quot;: &quot;Loadmore 加载更多组件&quot;,
        &quot;link&quot;: &quot;/components/loadmore.md&quot;
      },
      {
        &quot;text&quot;: &quot;Refresh 下拉刷新组件&quot;,
        &quot;link&quot;: &quot;/components/refresh.md&quot;
      },
      {
        &quot;text&quot;: &quot;Parallax 下拉视差组件&quot;,
        &quot;link&quot;: &quot;/components/parallax.md&quot;
      },
      {
        &quot;text&quot;: &quot;Nav 分类导航组件&quot;,
        &quot;link&quot;: &quot;/components/nav.md&quot;
      },
      {
        &quot;text&quot;: &quot;Nav Pannel 切换组件&quot;,
        &quot;link&quot;: &quot;/components/navPannel.md&quot;
      },
      {
        &quot;text&quot;: &quot;Search 搜索组件&quot;,
        &quot;link&quot;: &quot;/components/search.md&quot;
      },
      {
        &quot;text&quot;: &quot;Sort 排序及分类筛选组件&quot;,
        &quot;link&quot;: &quot;/components/sort.md&quot;
      },
      {
        &quot;text&quot;: &quot;Floor 下拉二楼组件&quot;,
        &quot;link&quot;: &quot;/components/floor.md&quot;
      },
      {
        &quot;text&quot;: &quot;BackToTop 回到顶部组件&quot;,
        &quot;link&quot;: &quot;/components/backToTop.md&quot;
      }
    ]
  },
  &quot;socialLinks&quot;: [
    {
      &quot;icon&quot;: &quot;github&quot;,
      &quot;link&quot;: &quot;https://github.com/wzs28150/coolui-scroller&quot;
    }
  ],
  &quot;outlineTitle&quot;: &quot;快速跳转&quot;,
  &quot;outline&quot;: 2
}</pre><h3 id="page-data" tabindex="-1">Page Data <a class="header-anchor" href="#page-data" aria-label="Permalink to &quot;Page Data&quot;">​</a></h3><pre>{
  &quot;title&quot;: &quot;Runtime API Examples&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;frontmatter&quot;: {
    &quot;outline&quot;: &quot;deep&quot;
  },
  &quot;headers&quot;: [],
  &quot;relativePath&quot;: &quot;api-examples.md&quot;,
  &quot;filePath&quot;: &quot;api-examples.md&quot;
}</pre><h3 id="page-frontmatter" tabindex="-1">Page Frontmatter <a class="header-anchor" href="#page-frontmatter" aria-label="Permalink to &quot;Page Frontmatter&quot;">​</a></h3><pre>{
  &quot;outline&quot;: &quot;deep&quot;
}</pre><h2 id="more" tabindex="-1">More <a class="header-anchor" href="#more" aria-label="Permalink to &quot;More&quot;">​</a></h2><p>Check out the documentation for the <a href="https://vitepress.dev/reference/runtime-api#usedata" target="_blank" rel="noreferrer">full list of runtime APIs</a>.</p></div></div></main><footer class="VPDocFooter" data-v-8bc1b22e data-v-71b8f6cb><!--[--><!--]--><!----><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"sponsors.md\":\"2e43bf31\",\"index.md\":\"2b34af29\",\"case_case2.md\":\"3d6df9f2\",\"case_case3.md\":\"191980b6\",\"components_loadmore.md\":\"44857dab\",\"components_navpannel.md\":\"72436f77\",\"components_backtotop.md\":\"b0d90a94\",\"components_handtip.md\":\"0bf3638e\",\"case_case.md\":\"d293c815\",\"components_item.md\":\"a92b4398\",\"guide.md\":\"e617b058\",\"version.md\":\"b9b9e730\",\"components_empty.md\":\"156c8c7f\",\"markdown-examples.md\":\"ccebdb51\",\"api-examples.md\":\"d075f7b8\",\"community.md\":\"b04fbd9c\",\"components_parallax.md\":\"f1430f5e\",\"components_page.md\":\"493d7613\",\"components_floor.md\":\"30e6f244\",\"components_sort.md\":\"d7552ff5\",\"components_search.md\":\"2708bba7\",\"components_scroller.md\":\"50081cb0\",\"components_refresh.md\":\"953892a5\",\"components_nav.md\":\"7cf2b606\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"coolui-scroller\",\"description\":\"coolui-scroller\",\"base\":\"/coolui-scroller/v3/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide\"},{\"text\":\"组件\",\"link\":\"/components/scroller.md\"},{\"text\":\"示例\",\"items\":[{\"text\":\"有趣的下拉\",\"link\":\"/case/case\"},{\"text\":\"下拉组合\",\"link\":\"/case/case2\"},{\"text\":\"下拉二楼\",\"link\":\"/case/case3\"}]},{\"text\":\"社群\",\"link\":\"/community\"},{\"text\":\"赞助\",\"link\":\"/sponsors\"},{\"text\":\"v3.3.8\",\"items\":[{\"text\":\"v3.3.8\",\"link\":\"/version.md#v3-3-8\"},{\"text\":\"v3.3.7\",\"link\":\"/version.md#v3-3-7\"},{\"text\":\"v3.3.6\",\"link\":\"/version.md#v3-3-6\"},{\"text\":\"v3.3.4\",\"link\":\"/version.md#v3-3-4\"},{\"text\":\"v3.3.3\",\"link\":\"/version.md#v3-3-3\"},{\"text\":\"v3.3.2\",\"link\":\"/version.md#v3-3-2\"},{\"text\":\"v3.3.1\",\"link\":\"/version.md#v3-3-1\"},{\"text\":\"v3.3.0\",\"link\":\"/version.md#v3-3-0\"},{\"text\":\"v3.2.9\",\"link\":\"/version.md#v3-2-9\"},{\"text\":\"v3.2.8\",\"link\":\"/version.md#v3-2-8\"},{\"text\":\"v3.2.7\",\"link\":\"/version.md#v3-2-7\"},{\"text\":\"v3.2.6\",\"link\":\"/version.md#v3-2-6\"},{\"text\":\"v3.2.5\",\"link\":\"/version.md#v3-2-5\"},{\"text\":\"v3.2.3\",\"link\":\"/version.md#v3-2-3\"},{\"text\":\"v3.1.1\",\"link\":\"/version.md#v3-1-1\"},{\"text\":\"v3.0.8\",\"link\":\"/version.md#v3-0-8\"},{\"text\":\"v3.0.5\",\"link\":\"/version.md#v3-0-5\"},{\"text\":\"v3.0.4\",\"link\":\"/version.md#v3-0-4\"},{\"text\":\"v3.0.0\",\"link\":\"/version.md#v3-0-0\"},{\"text\":\"v2\",\"link\":\"https://wzs28150.github.io/coolui-scroller/v2/\"},{\"text\":\"v1\",\"link\":\"https://github.com/wzs28150/coolui-scroller/tree/1.0\"}]}],\"sidebar\":{\"/guide/\":[],\"/components/\":[{\"text\":\"Scroller 滚动组件\",\"link\":\"/components/scroller.md\"},{\"text\":\"Item 列表项组件\",\"link\":\"/components/item.md\"},{\"text\":\"Page 长列表分页组件\",\"link\":\"/components/page.md\"},{\"text\":\"Empty 空列表组件\",\"link\":\"/components/empty.md\"},{\"text\":\"Handtip 手势提示组件\",\"link\":\"/components/handtip.md\"},{\"text\":\"Loadmore 加载更多组件\",\"link\":\"/components/loadmore.md\"},{\"text\":\"Refresh 下拉刷新组件\",\"link\":\"/components/refresh.md\"},{\"text\":\"Parallax 下拉视差组件\",\"link\":\"/components/parallax.md\"},{\"text\":\"Nav 分类导航组件\",\"link\":\"/components/nav.md\"},{\"text\":\"Nav Pannel 切换组件\",\"link\":\"/components/navPannel.md\"},{\"text\":\"Search 搜索组件\",\"link\":\"/components/search.md\"},{\"text\":\"Sort 排序及分类筛选组件\",\"link\":\"/components/sort.md\"},{\"text\":\"Floor 下拉二楼组件\",\"link\":\"/components/floor.md\"},{\"text\":\"BackToTop 回到顶部组件\",\"link\":\"/components/backToTop.md\"}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wzs28150/coolui-scroller\"}],\"outlineTitle\":\"快速跳转\",\"outline\":2},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>